<template>
	<view class="tobBatcomponent">
		<view class="Bottom-component">
			<ul class="topBat">
				<li @click="Deviceinformation">状态</li>
				<li @click="Realtime">详情</li>
				<li @click="prediction">实况</li>
				<li @click="historydata">历史</li>
				<li @click="statisticanalysis">分析</li>
				<li @click="mypage">我的</li>
			</ul>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue';
	import MyComponent from './Bottom-component.vue';
	Vue.component('Bottom-component', MyComponent);
	export default {
		data() {
			return {
				cssid: '',
			};
		},
		onLoad(e) {
			this.cssid = e.cssid;
		},
		mounted() {
			this.draw();
		},
		methods: {
			mypage() {
				uni.navigateTo({
					url: '/pages/mypage/mypage?cssid=' + this.cssid,
					animationType: 'fade-in', // 指定动画类型
					animationDuration: 300 // 动画时长
				})
			},
			historydata() {
				uni.navigateTo({
					url: '/pages/historydata/historydata?cssid=' + this.cssid,
					animationType: 'fade-in', // 指定动画类型
					animationDuration: 300 // 动画时长
				})
			},
			prediction() {
				uni.navigateTo({
					url: '/pages/prediction/prediction?cssid=' + this.cssid,
					animationType: 'fade-in', // 指定动画类型
					animationDuration: 300 // 动画时长
				})
			},
			statisticanalysis() {
				uni.navigateTo({
					url: '/pages/statisticanalysis/statisticanalysis?cssid=' + this.cssid,
					animationType: 'fade-in', // 指定动画类型
					animationDuration: 300 // 动画时长
				})
			},
			Realtime() {
				uni.navigateTo({
					url: '/pages/Realtime/Realtime?cssid=' + this.cssid,
					animationType: 'fade-in', // 指定动画类型
					animationDuration: 300 // 动画时长
				})
			},
			Deviceinformation() {
				uni.navigateTo({
					url: '/pages/Deviceinformation/Deviceinformation?cssid=' + this.cssid,
					animationType: 'fade-in', // 指定动画类型
					animationDuration: 300 // 动画时长
				})
			},
			draw(e) {
				let themes = document.querySelector('.bruce');
				let color = document.querySelectorAll(".bubble")
				if (this.cssid == 1) {
					this.button = false;
					this.title = "白天模式"
					this.cssid = 1
					themes.style.background = 'linear-gradient(270deg, #0a0b35, #120144)'
					color.forEach(function(element) {
						element.style.color = '#83c0f7'
					});

				} else {
					this.title = "夜间模式"
					this.button = true;
					this.cssid = 0
					themes.style.background = 'linear-gradient(270deg, #819cad, #81a5bd)'
					color.forEach(function(element) {
						element.style.color = '#6661e6'
					});

				}
			}
		}
	}
</script>

<style lang="scss">

	.tobBatcomponent {
		background-color: rgba(230, 230, 230, 0.3);
		position: absolute;
		border-top: #bbb solid 1px;
		bottom: 0;
		z-index: 101;
		width: 100vw;
		height: 40px;

		.Bottom-component {
			list-style: none;

			.topBat {
				display: grid;
				grid-template-columns: repeat(6, 1fr);
				justify-items: center;
				list-style-type: none;
				padding: 0;
				margin: 0;
				box-sizing: border-box;

				li {
					padding: 10px;
					font-size: 14px;

					&:hover {
						cursor: pointer;
						color: #000;
						font-weight: bold;
					}
				}

			}
		}
	}
</style>